<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link href="./style.css" rel="stylesheet" >
</head>

<body>

  <!-- https://marked.js.org/ -->
  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
  <!-- https://lodash.com/ -->
  <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>

  <!-- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> -->
  <script type="importmap">
      {
        "imports": {
          "vue": "https://unpkg.com/vue@3.2.31/dist/vue.esm-browser.js"
        }
      }
    </script>

 <!--
A simple markdown editor.
-->

<script type="module">
  const marked = window.marked;
  const _ = window._;
  import { createApp, ref, computed } from 'vue'
  
  createApp({
    setup() {
      const input = ref('# hello')
  
      const output = computed(() => marked.parse(input.value))
  
      const update = _.debounce((e) => {
        input.value = e.target.value
      }, 100)
  
      return {
        input,
        output,
        update
      }
    }
  }).mount('#app')
  </script>
  
  <div id="app">
    <div class="editor">
      <textarea class="input" :value="input" @input="update"></textarea>
      <div class="output" v-html="output"></div>
    </div>
  </div>

</body>

</html>